<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>响应式原理</title>
	<link rel="stylesheet" href="">
</head>
<body>
	
</body>
<script>
	
	/* 目标

		1. 验证动态添加的元素是否具有响应式
		
	*/


	let data = {
		age: [12, 23, 34],
	}


	// 008中提供的算法
	function defineResponse(obj, key, value, enumerable) {
		Object.defineProperty(obj, key, {
			enumerable: enumerable == undefined ? true : !!enumerable,
			get: ()=>{
				return `获取到了${key}的值：${value}`;
			},
			set: (newValue)=>{
				value = newValue;
				console.log(`设置${key}的值为${value}`);
			}
		})
	}
	

	function response(obj) {
		let keys = Object.keys(obj);

		for(let i = 0; i < keys.length; i++) {
			if(typeof(obj[keys[i]]) === 'object' ) {
				response(obj[keys[i]]);
			} else {
				defineResponse(obj, keys[i], obj[keys[i]]);
			}
		}

	}
	response(data);
	// data.age.push(12);
	// 结论： 动态添加的元素不具有响应式


	/* 解决办法

		1. 动态添加的元素，不具有响应式，那么解决的方法有几种
			-1 给动态添加的元素继续调用response方法，但是有一点不优雅，为了给动态添加的元素转换成响应式，我们就要调用一次response方法，十分不优雅。同时直接调用response方法存在性能的浪费。

			-2 重写push方法，很高大上的做法，存在弊端，如果重写push方法，那么不用转换为响应式的数据被迫转换为了响应式，可能对其他无关的数据造成影响.

			-3 修改需要响应式的数据的原型链，让其指向我们自定义的方法上。
	*/


	/* 总结

		1. 经过对比，我采用第三种方法
	*/



</script>
</html>